<!-- src/views/Login.vue -->
<template>
  <section class="py-16 bg-neutral min-h-screen flex items-center justify-center">
    <div class="w-full max-w-md bg-white rounded-xl shadow-lg p-8">
      <div class="text-center mb-8">
        <div class="w-16 h-16 rounded-lg bg-primary flex items-center justify-center mx-auto mb-4">
          <i class="fa fa-picture-o text-white text-2xl"></i>
        </div>
        <h2 class="text-2xl font-bold">登录</h2>
        <p class="text-gray-500 mt-2">欢迎回来，请登录你的账号</p>
      </div>
      
      <form @submit.prevent="handleLogin">
        <div class="mb-4">
          <label class="block text-sm font-medium mb-2" for="username">用户名</label>
          <input 
            type="text" 
            id="username" 
            v-model="username"
            class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all"
            placeholder="请输入用户名"
            required
          >
        </div>
        
        <div class="mb-6">
          <label class="block text-sm font-medium mb-2" for="password">密码</label>
          <input 
            type="password" 
            id="password" 
            v-model="password"
            class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all"
            placeholder="请输入密码"
            required
          >
          <div class="flex justify-end mt-2">
            <a href="#" class="text-sm text-primary hover:underline">忘记密码？</a>
          </div>
        </div>
        
        <button 
          type="submit"
          class="w-full py-3 bg-primary text-white rounded-lg font-medium hover:bg-primary/90 transition-colors shadow-md hover:shadow-lg"
        >
          登录
        </button>
      </form>
      
      <div class="mt-6 text-center">
        <p class="text-gray-500 text-sm">
          还没有账号？
          <router-link to="/register" class="text-primary font-medium hover:underline">立即注册</router-link>
        </p>
      </div>
    </div>
  </section>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import api, { apiRequest, DEBUG_MODE, API_BASE_URL, getAuthToken } from '../utils/api'

// API基础URL配置 - 与Register.vue保持一致
/* const API_BASE_URL = 'http://localhost:8888'; */

const username = ref('')
const password = ref('')
const router = useRouter()

const handleLogin = async () => {
    if (!username.value || !password.value) {
      alert('请输入用户名和密码')
      return
  }
    
    try {
      // 准备登录数据
      const loginData = {
        username: username.value,
        password: password.value
      }
      
      // 使用封装的API工具发送请求
      const data = await api.post('/user/login', loginData);
    
      // 根据返回的code处理结果
      if (data.code === 0) {
        // 登录成功
        // 保存用户信息到localStorage，供Header组件使用
        if (data.data) {
          localStorage.setItem('userInfo', JSON.stringify(data.data))
        }
        alert(`登录成功！欢迎，${data.data?.nickname || data.data?.username || '用户'}`)
        // 检查是否有待处理的漫画生成请求
        const hasPendingSelections = localStorage.getItem('pendingComicSelections')
        // 直接跳转到首页，让HomeSection组件恢复用户的选择
        router.push('/')
      } else if (data.code === 4) {
        // 业务错误，显示具体错误信息
        alert(`登录失败：${data.msg || '用户名或密码错误'}`)
      } else if (data.code === 5) {
        // 系统错误
        alert('系统错误，请稍后重试')
      } else {
        // 其他错误
        alert('登录失败，请检查您的用户名和密码')
      }
    } catch (error) {
      console.error('登录请求失败:', error)
      alert('网络错误，请检查您的网络连接')
    }
  }
</script>